<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>yui.js</title>

<script type="text/javascript">


    function log(msg) {

        //alert(msg);

        if (typeof console !== "undefined" && console.debug) {
            console.debug(msg);
        } else {
            //alert(msg);
            var d=document, b=d.body, n=d.createElement("div");
            if (b) {
                n.appendChild(d.createTextNode(msg));
                b.appendChild(n);
            }
        }
    }

    YAHOO_config = {
        listener: function(minfo) {
            log("page load listener: " + minfo.name);
        },
        load: {
            //require: ['tabview', 'treeview'],
            require: ['tabview', 'treeview'],

skin:
         {
             defaultSkin: 'sam',
             base: 'assets/skins/',
             overrides:{tabview: ['sam_orange']}
         },
            loadOptional: true,
            filter: 'DEBUG',
            base: '../../build/',

            onLoadComplete: function(loader) {
                log("onLoadComplete");
                YAHOO.util.Event.onAvailable("treediv", function() {
                        log("creating tree");
                        var tree = new YAHOO.widget.TreeView("treediv");
                        var n = new YAHOO.widget.TextNode("node 1", tree.getRoot());
                        new YAHOO.widget.TextNode("node 2", n);
                        new YAHOO.widget.TextNode("node 3", n);
                        tree.draw();
                    });

                var tabView = new YAHOO.widget.TabView( { id: 'demo' } );

                tabView.addTab( new YAHOO.widget.Tab({
                    label: 'lorem',
                    content: '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>',
                    active: true
                }));

                tabView.addTab( new YAHOO.widget.Tab({
                    label: 'ipsum',
                    content: '<ul><li><a href="#">Lorem ipsum dolor sit amet.</a></li><li><a href="#">Lorem ipsum dolor sit amet.</a></li><li><a href="#">Lorem ipsum dolor sit amet.</a></li><li><a href="#">Lorem ipsum dolor sit amet.</a></li></ul>'
                }));

                tabView.addTab( new YAHOO.widget.Tab({
                    label: 'dolor',
                    content: '<form action="#"><fieldset><legend>Lorem Ipsum</legend><label for="foo"> <input id="foo" name="foo"></label><input type="submit" value="submit"></fieldset></form>'
                }));

                YAHOO.util.Event.onContentReady('doc', function() {
                    log("creating tabview");
                    tabView.appendTo(this);
                });

                log(loader.sorted);
            }
        }
    };

</script>

<script type="text/javascript" src="../../build/yuiloader/yuiloader.js"></script>

</head>
<body>
<h1>header</h1>
<p>In this example, the YUI library is not yet on the page.  We use the YAHOO_config to
configure what components we wish to load.  Since we do this prior loading YAHOO, we are
able to take advantage of the automatic rollup capability built into the loader</p>
<div id="treediv"></div>
<div id="doc"></div>
</body>
</html>
